<template>
  <div class="wrapOuterLogin">
    <div class="wrapInnerLogin">
      <Form ref="formInline" :model="loginInfo" :rules="ruleInline" >
        <FormItem prop="user" label="账号" label-width="60">
          <Input type="text" v-model="loginInfo.user" placeholder="请输入您的账号"/>
        </FormItem>
        <FormItem prop="password" label="密码" label-width="60">
          <Input type="password" v-model="loginInfo.password" placeholder="请输入您的密码">
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
  export default {
    name: "login",
    data () {
      return {
        loginInfo: {
          user: '',
          password: ''
        },
        ruleInline: {
          user: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码.', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码不能低于6位', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSubmit(name) {
        let that = this
        this.$refs[name].validate((valid) => {
          if (valid) {
            let loginObj = Object.assign({},this.loginInfo)
            this.$post(
              "/api/app/login",
              {
                ...loginObj
              }

            ).then(res=>{
              if(res.code===200){
                sessionStorage.setItem('AccessToken',res.token)
                // sessionStorage 一定要在$router.push的前边，否则
                // 导航守卫那里的AccessToken就是空
                this.$router.push("/layout/order/list")
                this.$Message.success('登录成功!');
              }else {
                this.$Message.error('登录出错!');
              }

            }).catch( error=>{
              console.log("login error",error)
              this.$Message.error('登录出错!');
            })

          } else {
            this.$Message.error('验证出错');
          }
        })

      }
    }
  }
</script>

<style scoped>
  .wrapOuterLogin{
    position: relative;
    height: 100vh;
  }
  .wrapInnerLogin{
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
</style>
